/**
 * 第013步：项目（Vite）
 * -> npm create vite@latest vite5-vue3-ts5-i18n || npm init vite@latest demo-i18n
 *
 * 第014步：依赖（NPM）
 * -> npm install
 * // 提前手动创建文件
 * -> .npmrc
 * 第014步：依赖（PNPM）
 * -> pnpm install
 * // 之后自动生成文件（pnpm i --lockfile-only ||	Only pnpm-lock.yaml is updated）
 * -> pnpm-lock.yaml
 * 第014步：依赖（YARN）
 * -> yarn install
 * // 提前手动创建文件
 * -> yarn.lock
 *
 * 第021步：用户界面（Element Plus）
 * -> npm install element-plus @element-plus/icons-vue -S
 * -> 配置：./src/main.ts
 * -> // npm install element-plus -S
 * -> import ElementPlus from "element-plus";
 * -> import "element-plus/dist/index.css";
 * -> import zhCn from "element-plus/es/locale/lang/zh-cn";
 * -> // npm install @element-plus/icons-vue -S
 * -> import * as ElementPlusIconsVue from "@element-plus/icons-vue";
 * -> app.use(ElementPlus, { locale: zhCn });
 * -> for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
 * ->   app.component(key, component);
 * -> }
 *
 * 第022步：别名（@）
 * -> npm install @types/node -D
 * -> 配置：./vite.config.js
 * -> import path from "path";
 * -> export default defineConfig((config: ConfigEnv): UserConfig => {
 * ->   return {
 * ->     plugins: [
 * ->       vue(),
 * ->     ],
 * ->     resolve: {
 * ->       alias: {
 * ->         "@": path.resolve("./src"), // 相对路径别名配置，使用@符号代替src
 * ->       },
 * ->     },
 * ->   };
 * -> });
 * -> 配置：./tsconfig.app.json 和 ./tsconfig.node.json
 * -> {
 * ->   "compilerOptions": {
 * ->     "baseUrl": "./", // 解析非相对模块的基地址，默认是当前目录
 * ->     "paths": {
 * ->       "@/*": ["./src/*"] // 路径映射，相对于：baseUrl
 * ->     }
 * ->   },
 * -> }
 * -> 异常：Cannot find module '@/components/HelloWorld.vue' or its corresponding type declarations. Vetur(2307)
 * -> 解决：Vetur插件支持Vue2框架，Volar插件支持Vue3框架，Volar插件已被弃用，欢迎使用Vue-Official插件。
 * -> 重启：退出VSCode工具，重新打开启动项目即可。
 *
 * 第023步：环境变量（.ENV）
 * -> 开发环境<Development>：
 * -> .env.development
 * -> 测试环境<Testing>：
 * -> .env.testing
 * -> 生产环境<Production>：
 * -> .env.production
 * -> --
 * -> # 开发环境
 * -> NODE_ENV = 'development'
 * -> # 变量必须以（VITE_）为前缀才能暴露给外部读取
 * -> VITE_APP_TITLE = '硅谷甄选运营平台'
 * -> # 基础路径
 * -> VITE_APP_BASE_API = '/dev-api'
 * -> # 基础服务
 * -> VITE_SERVE = "http://youshang-api.liuweiwei.com"
 * -> .env.development
 * -> .env.production
 * -> .env.testing
 * -> 获取环境变量方法：console.log(import.meta.env)
 *
 * 第024-025步：图标（SVG）
 * -> npm install vite-plugin-svg-icons -D
 * -> 配置：./vite.config.ts
 * -> import path from "path";
 * -> import { createSvgIconsPlugin } from "vite-plugin-svg-icons";
 * -> export default defineConfig((config: ConfigEnv): UserConfig => {
 * ->   const envDir = process.cwd();
 * ->   return {
 * ->     base: "/",
 * ->     plugins: [
 * ->       vue(),
 * ->       createSvgIconsPlugin({
 * ->         iconDirs: [path.resolve(envDir, "src/assets/icons")],
 * ->         symbolId: "icon-[dir]-[name]",
 * ->       }),
 * ->     ],
 * ->   };
 * -> });
 * -> 配置：./src/matin.ts
 * -> // npm install vite-plugin-svg-icons -D
 * -> // 插件所需配置代码
 * -> import "virtual:svg-icons-register";
 * -> import SvgIcons from '@/components/index.ts';
 * -> app.use(SvgIcons);
 * -> 配置：./components/index.ts
 * -> import SvgIcon from "@/components/SvgIcon/index.vue";
 * -> const allGlobalComponents = { SvgIcon };
 * -> export default {
 * ->   install(app) {
 * ->     Object.keys(allGlobalComponents).forEach((key) => {
 * ->       app.component(key, allGlobalComponents[key]);
 * ->     });
 * ->   },
 * -> };
 * -> 配置：./components/SvgIcon/index.vue
 * -> <template>
 * ->   // svg：图标外层容器节点，内部需要与 use 标签结合使用。
 * ->   // xlink:href：执行用哪一个图标，属性值务必使用 #icon- 图标名字。
 * ->   // use：标签，fill 属性可以设置图标的颜色。
 * ->   <svg :style="{ width, height }">
 * ->     <use :xlink:href="symbolId" rel="external nofollow" :fill="color"></use>
 * ->   </svg>
 * -> </template>
 * -> <script name="SvgIcon" setup lang="ts">
 * -> import { computed } from "vue";
 * -> const props = defineProps({
 * ->   prefix: {
 * ->     type: String,
 * ->     default: "icon",
 * ->   },
 * ->   name: String,
 * ->   iconClass: {
 * ->     type: String,
 * ->     required: false,
 * ->   },
 * ->   color: {
 * ->     type: String,
 * ->     default: "#000",
 * ->   },
 * ->   width: {
 * ->     type: String,
 * ->     default: "16px",
 * ->   },
 * ->   height: {
 * ->     type: String,
 * ->     default: "16px",
 * ->   },
 * -> });
 * -> const symbolId = computed(() => `#${props.prefix}-${props.name}`);
 * -> </script>
 * -> <style scoped lang="scss"></style>
 * -> 使用：
 * -> <svg-icon name="home" width="24px" height="24px"></svg-icon>
 * -> <svg-icon name="home"></svg-icon>
 *
 * 第026步：样式（SCSS）
 * -> 问题：在Vue项目中使用SCSS安装必要的依赖sass和sass-loader
 * -> <style scoped lang="scss"></style>
 * -> 问题：Preprocessor dependency "sass-embedded" not found. Did you install it? Try `npm install sass-embedded -D`.
 * -> npm install sass sass-loader -D
 * -> 配置：./vite.config.ts
 * -> import path from "path";
 * -> export default defineConfig((config: ConfigEnv): UserConfig => {
 * ->   return {
 * ->     plugins: [
 * ->       vue(),
 * ->     ],
 * ->     resolve: {
 * ->       alias: {
 * ->         "@": path.resolve("./src"),
 * ->       },
 * ->     },
 * ->     css: {
 * ->       preprocessorOptions: {
 * ->         scss: {
 * ->           javascriptEnabled: true, // sass: ~1.63.6 版本
 * ->           additionalData: `@import "./src/styles/variable.scss";`, // sass: ~1.63.6 版本
 * ->           // additionalData: undefined,
 * ->         },
 * ->       },
 * ->     },
 * ->   };
 * -> });
 * -> 配置：./src/main.ts
 * -> // import "@/style.scss";
 * -> // npm install sass sass-loader -D
 * -> import "@/styles/index.scss";
 * -> 配置：./src/styles/index.scss
 * -> // 引入清除默认样式
 * -> @import "./reset.scss";
 * -> // 引入全局变量样式
 * -> @import "./variable.scss";
 * -> 异常：Deprecation Warning: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
 * -> 解决：查看Sass官方文档，发现Sass版本高于1.8.0就要把@import 改成@use ，目前使用的是~1.63.6版本
 * -> 异常：Deprecation Warning: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.
 * -> 提示："sass": "^1.81.1"，意思是自动更新【最新的版本】
 * -> 提示："sass": "~1.63.6"，意思是只更新【最小的版本】（./node_modules/sass/package.json/{"version":"1.63.6"}）
 * -> 解决：官方给出的方法是推荐降低到1.63.6
 * -> 或者：https://element-plus.org/zh-CN/guide/installation.html（不推荐，报错）
 * -> 安装：在2.8.5及以后的版本，Sass的最低支持版本为1.79.0
 * -> 提示：legacy JS API Deprecation Warning，可以配置以下代码在vite.config.ts中。
 * -> css: {
 * ->   preprocessorOptions: {
 * ->     scss: { api: 'modern-compiler' },
 * ->   }
 * -> }
 * -> 提示：以上问题出自于 Vite 5.x 版本，Vite 6.x 版本已修复此问题。
 *
 * 第027步：路由（VueRouter）
 * -> npm install vue-router -S
 * -> 配置：./src/main.ts
 * -> // npm install vue-router -S
 * -> import router from "@/router/index.ts";
 * -> app.use(router);
 * -> 配置：./src/router/index.ts
 * -> // 第002个包：npm install vue-router -S
 * -> import { createRouter, createWebHistory } from "vue-router";
 * -> // 创建路由实例对象
 * -> const router = createRouter({
 * ->   // 路由模式（createWebHistory()和createWebHashHistory()）
 * ->   history: createWebHistory(),
 * ->   // 路由数组
 * ->   routes: [
 * ->     {
 * ->       path: "/",
 * ->       component: () => import("@/views/layout/index.vue"), // 路由懒加载import
 * ->       name: "Layout", // 命名空间name，命名路由（路由权限控制）
 * ->       meta: {
 * ->         title: "布局页面",
 * ->         icon: "HomeFilled",
 * ->         hidden: false,
 * ->       },
 * ->       redirect: "/home",
 * ->       children: [
 * ->         {
 * ->           path: "/home",
 * ->           component: () => import("@/views/home/index.vue"), // 路由懒加载import
 * ->           name: "Home", // 命名空间name，命名路由（路由权限控制）
 * ->           meta: {
 * ->             title: "公司首页",
 * ->             icon: "HomeFilled",
 * ->             hidden: false,
 * ->           },
 * ->         },
 * ->       ],
 * ->     },
 * ->     {
 * ->       path: "/login",
 * ->       component: () => import("@/views/login/index.vue"), // 路由懒加载import
 * ->       name: "Login", // 命名空间name，命名路由（路由权限控制）
 * ->       meta: {
 * ->         title: "登录页面",
 * ->         icon: "User",
 * ->         hidden: true,
 * ->       },
 * ->     },
 * ->   ],
 * ->   // 滚动行为
 * ->   scrollBehavior() {
 * ->     return {
 * ->       left: 0,
 * ->       top: 0,
 * ->     };
 * ->   },
 * -> });
 * -> // 向外暴露
 * -> export default router;
 * -> 配置：./src/App.vue
 * -> <template>
 * ->   <!-- TODO -> 第一层：在容器中添加路由组件占位符（路由：path: "/"）到页面：component: () => import("@/views/layout/index.vue") -->
 * ->   <router-view></router-view>
 * -> </template>
 * -> <script setup lang="ts">
 * ->  * 在 Vue.js 中，router-view 和 router-link 是 Vue Router 提供的两个核心组件，用于实现单页面应用（SPA）中的导航和组件展示。
 * ->  *   1. router-view
 * ->  *     router-view 是一个特殊的 Vue 组件，用于渲染通过 Vue Router 定义的路由规则中的组件。它会根据当前的 URL 渲染对应的组件。
 * ->  *     当 URL 改变时，router-view 会自动更新渲染的组件，而无需重新加载整个页面。
 * ->  *     通常，router-view 会被放置在应用的布局组件中，作为页面内容的主要展示区域。
 * ->  *   2. router-link
 * ->  *     router-link 是 Vue Router 提供的用于创建链接的组件。它相当于 HTML 标签中的 <a> 标签，但可以更智能地处理导航。
 * ->  *     使用 router-link 可以避免页面的完全重载，从而提高用户体验和性能。
 * ->  *     router-link 的 to 属性用于指定链接的目标地址，可以是字符串或对象形式。
 * ->  * 示例代码
 * ->  *   1. 假设你有以下的路由配置
 * ->  *     const routes = [
 * ->  *       { path: "./", component: HomeComponent },
 * ->  *       { path: "./about", component: AboutComponent },
 * ->  *       { path: "./user/:id", component: UserComponent },
 * ->  *     ];
 * ->  *   2. 在你的布局组件中，你可以这样使用 router-view 和 router-link
 * ->  *     <template>
 * ->  *       <div id="app">
 * ->  *         <nav>
 * ->  *           <router-link to="/">Home</router-link>
 * ->  *           <router-link to="/about">About</router-link>
 * ->  *           <router-view></router-view>
 * ->  *         </nav>
 * ->  *       </div>
 * ->  *     </template>
 * ->  * 在这个例子中，router-link 用于创建导航链接，而 router-view 用于展示根据当前 URL 动态加载的组件。
 * -> </script>
 * -> <style scoped lang="scss"></style>
 * -> 配置：./src/views/layout/index.vue
 * -> <template>
 * ->   <div>
 * ->     <h1>布局页面：上面一块...</h1>
 * ->     <h1>布局页面：左边一块...</h1>
 * ->     <Domain></Domain>
 * ->   </div>
 * -> </template>
 * -> <script setup lang="ts">
 * -> import Domain from "@/views/layout/domain/index.vue";
 * -> </script>
 * -> <style scoped lang="scss"></style>
 * -> 配置：./src/views/layout/domain/index.vue
 * -> <template>
 * ->   <!-- 0. RouterView(渲染路由组件) && Transition(过渡动画组件) && Component(动态组件) || KeepAlive(动态切换缓存组件) -->
 * ->   <!--
 * ->   <router-view v-slot="{ Component, route }">
 * ->     <keep-alive>
 * ->       <transition :name="route.meta.transition || 'fade'" mode="out-in" appear>
 * ->         <component :is="Component" key="route.path" view-prop="value"></component>
 * ->       </transition>
 * ->     </keep-alive>
 * ->   </router-view>
 * ->   -->
 * ->   <!-- 0. RouterView插槽 + Transition过渡动画 + Component动态组件 -->
 * ->   <!-- 1. TODO -> 第二层：在容器中添加路由组件占位符（路由：path: "/home"）到页面：component: () => import("@/views/home/index.vue") -->
 * ->   <!-- 1.1. RouterView 插槽：显示用户所在的当前路由的组件 -->
 * ->   <!-- 1.2. v-slot="{ Component, route }" 接收 prop 的默认插槽并解构 -->
 * ->   <router-view v-slot="{ Component, route }">
 * ->     <!-- 2. 组件间过渡 -->
 * ->     <!-- 2.1. 内置组件：Transition name="fade" mode="out-in" appear -->
 * ->     <transition name="route.meta.transition || fade" mode="out-in" appear>
 * ->       <!-- 2.2. 动态组件 -->
 * ->       <component :is="Component" :key="route.path" view-prop="value"></component>
 * ->     </transition>
 * ->   </router-view>
 * -> </template>
 * -> <script setup lang="ts"></script>
 * -> <style scoped lang="scss">
 * -> .fade-enter-active, .fade-leave-active {
 * ->   transition: opacity 0.5s ease;
 * -> }
 * -> .fade-enter-from, .fade-leave-to {
 * ->   opacity: 0;
 * -> }
 * -> </style>
 * -> 配置：./src/views/home/index.vue
 * -> <template>
 * ->   <div>
 * ->     <h1>领域页面：区域一块...</h1>
 * ->   </div>
 * -> </template>
 * -> <script setup lang="ts"></script>
 * -> <style scoped lang="scss"></style>
 *
 */

import { createApp } from 'vue'

import App from '@/App.vue'

//引入模板的全局的样式
import '@/styles/index.scss'
//引入element-plus插件与样式
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
//svg插件需要配置代码
import 'virtual:svg-icons-register'
//引入自定义插件对象:注册整个项目全局组件
import gloalComponent from '@/components'
//配置element-plus国际化
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
//@ts-expect-error
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
//暗黑模式需要的样式
import 'element-plus/theme-chalk/dark/css-vars.css'
//引入路由
import router from './router'
//引入仓库
import pinia from './store'
//获取应用实例对象
const app = createApp(App)
//安装element-plus插件
app.use(ElementPlus, {
  locale: zhCn, //element-plus国际化配置
})
//安装自定义插件
app.use(gloalComponent)
//安装仓库
app.use(pinia)
//注册模板路由
app.use(router)
//引入路由鉴权文件
import './permisstion'
//引入自定义指令文件
import { isHasButton } from '@/directive/has'
isHasButton(app)
//将应用挂载到挂载点上
app.mount('#app')
